<template>
	<div class="login">
		<el-form :model="user" class="demo-ruleForm" status-icon style="width: 350px;" :rules="myrules" :hide-required-asterisk="true" ref="formRef">
			<el-card class="box-card">
				<template #header>
				  <div class="card-header">
					<span><h3 style="color: blueviolet;">东软环保公众监督平台</h3></span>
				  </div>
				</template>
				<el-form-item prop="phoneNumber">
					<el-input v-model="user.phoneNumber" :prefix-icon="User" placeholder="请输入用户名"/>
				</el-form-item>
				<el-form-item prop="passWord">
					<el-input v-model="user.passWord" :prefix-icon="Lock" type="passWord" placeholder="请输入密码"/>
				</el-form-item>
				<el-link href="https://element.eleme.io" target="_blank" style="color: skyblue;">注册</el-link>
				<br>
				<el-button type="primary" @click="login" plain>登录</el-button>
			</el-card>
		</el-form>
	</div>
</template>

<script setup>
	import { ref ,reactive} from 'vue';
	import { ElMessage } from 'element-plus';
	import { useRouter } from 'vue-router';
	import axios from 'axios';
	import { Lock ,User } from '@element-plus/icons-vue'
		let user=reactive({
			phoneNumber:'',
			passWord:''
		})
		let myrules=reactive({
			phoneNumber:[{
				required:true,
				trigger:'blur',
				message:'用户名不能为空'
			}],
			passWord:[{
				required:true,
				trigger:'blur',
				message:'密码为必填项'
			}]
		})
		
		let formRef = ref(null)
		let router=useRouter()
		let login = () => {
		      formRef.value.validate((valid) => {
		        if (valid) {
					//请求后台
					axios.post("http://localhost:8086/login",
						{
							phoneNumber:user.phoneNumber,
							passWord:user.passWord
						}
					)
					.then(res=>{
						//用户登陆成功 给予一个标识
						sessionStorage.setItem("isLogin",'ok');
						let result=res.data
						if(result.code==200){
							ElMessage.success('登录成功!');
							router.push({
							path:'/'
							});
						}else{
							ElMessage.error(result.message);
						}
					})
					//如果后台返回成功，提示登录成功，跳转管理首页
					//如果登录失败，提示失败原因，不跳转
		        } else {
					ElMessage.error('登录失败');
					return false;
		        }
		      })
		    }
</script>

<style>
	.login{
		height: 100vh;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}
	.demo-ruleForm {
		display: flex;
		justify-content: center; 
		align-items: center; 
		height: 80vh; 
	  
	}
	.el-link {
		margin-right: 150px;
		margin-bottom: 10px;
	}
	.el-input{
		margin-left: 50px;
		margin-right: 50px;
	}
	.el-button{
		width: 200px;
	}
</style>